<div class="box-container">
  <div class="main-content">
    <div class="main-content-wrap">
      <div class="left-panel">
        <ul nz-menu nzMode="inline" class="hr-statistics-left-menu">
          <li nz-menu-item
              *ngFor="let item of listData; let idx = index"
              [nzSelected]="idx === 0"
              (click)="selectedAreaChanged(item.stadiaCode)">
            {{item.stadiaName}}
          </li>
        </ul>
      </div>

      <div class="right-panel">
        <div class="right-top-box">
          <!--<div class="content-top-bar">-->
          <!--<div class="right-ctrl-box">-->
          <!--<nz-range-picker-->
          <!--[nzRanges]="topDateRanges"-->
          <!--[(ngModel)]="topDateModal">-->
          <!--</nz-range-picker>-->
          <!--<button nz-button nzType="primary" (click)="queryInfo()" style="margin-left: 15px">-->
          <!--<i nz-icon nzType="search"></i> 查询-->
          <!--</button>-->
          <!--</div>-->

          <!--</div>-->

          <div class="right-content">

            <div class="card-box">
              <nz-card [nzTitle]="stationName + '水位流量过程线'"
                       class="card" [nzExtra]="swllCardTemplate">
                <div
                  echarts
                  [options]="processOpt"
                  (chartInit)="processChartInit($event)"
                  style="height: 329px;"
                ></div>
              </nz-card>
              <nz-card [nzTitle]="stationName + '旬月特征值对比'"
                       class="card" [nzExtra]="xytzzCardTemplate">

                <div
                  echarts
                  [options]="monthOpt"
                  [merge]="monthOptChange"
                  style="height: 291px;"
                ></div>
              </nz-card>
              <nz-card [nzTitle]="stationName + '历史同期对比'"
                       class="card" [nzExtra]="jcsjCardTemplate">
                <div
                  echarts
                  [options]="historyOpt"
                  [merge]="historyOptChange"
                  style="height: 291px;"
                ></div>
              </nz-card>
            </div>
            <div class="card-box">
              <nz-card [nzTitle]="stationName + '监测数据'"
                       class="card">
                <nz-table
                  #dataTable
                  nzBordered
                  [nzData]="tableData"
                  [nzPageSize]="pageSize"
                  nzSize="middle">
                  <thead>
                  <tr>
                    <th>日期</th>
                    <th>时间</th>
                    <th>水位(m)</th>
                    <th *ngIf="stationType === '7'">流量(m³/s)</th>
                    <th *ngIf="stationType === '3'">入库流量(m³/s)</th>
                    <th *ngIf="stationType === '3'">出库流量(m³/s)</th>
                  </tr>
                  </thead>
                  <tbody>
                  <tr *ngFor="let row of dataTable.data">
                    <td>{{ row.date }}</td>
                    <td>{{ row.time }}</td>
                    <td>{{ row.Height_Inside }}</td>
                    <td>{{ row.Flux_Income }}</td>
                    <td *ngIf="stationType === '3'">{{ row.Flux_Out }}</td>
                  </tr>
                  </tbody>
                </nz-table>
              </nz-card>
            </div>

            <ng-template #swllCardTemplate>
              <div class="card-search-wrap">
                <nz-range-picker [(ngModel)]="waterLevelDateModal"></nz-range-picker>
                <!--<button nz-button (click)="onQueryProcessList()">-->
                <div>
                  <i nz-icon nzType="search" class="search-icon" nzTheme="outline" (click)="onQueryProcessList()"></i>
                </div>
                <!--</button>-->
              </div>
            </ng-template>
            <!--<nz-card [nzTitle]="stationName + '特征及统计值'"-->
            <!--class="card">-->
            <!--<form nz-form [formGroup]="featureForm" class="form-content">-->
            <!--<div nz-row [nzGutter]="24">-->
            <!--<div nz-col [nzSpan]="12">-->
            <!--<nz-form-item nzFlex>-->
            <!--<nz-form-label>警戒水位</nz-form-label>-->
            <!--<nz-form-control>-->
            <!--<input nz-input placeholder="警戒水位" formControlName="warningLevel">-->
            <!--</nz-form-control>-->
            <!--</nz-form-item>-->
            <!--</div>-->
            <!--<div nz-col [nzSpan]="12">-->
            <!--<nz-form-item nzFlex>-->
            <!--<nz-form-label>保证水位</nz-form-label>-->
            <!--<nz-form-control>-->
            <!--<input nz-input placeholder="保证水位" formControlName="securityLevel">-->
            <!--</nz-form-control>-->
            <!--</nz-form-item>-->
            <!--</div>-->
            <!--<div nz-col [nzSpan]="12">-->
            <!--<nz-form-item nzFlex>-->
            <!--<nz-form-label>最大值</nz-form-label>-->
            <!--<nz-form-control>-->
            <!--<input nz-input placeholder="最大值" formControlName="max">-->
            <!--</nz-form-control>-->
            <!--</nz-form-item>-->
            <!--</div>-->
            <!--<div nz-col [nzSpan]="12">-->
            <!--<nz-form-item nzFlex>-->
            <!--<nz-form-label>最小值</nz-form-label>-->
            <!--<nz-form-control>-->
            <!--<input nz-input placeholder="最小值" formControlName="min">-->
            <!--</nz-form-control>-->
            <!--</nz-form-item>-->
            <!--</div>-->
            <!--<div nz-col [nzSpan]="12">-->
            <!--<nz-form-item nzFlex>-->
            <!--<nz-form-label>最大值出现时间</nz-form-label>-->
            <!--<nz-form-control>-->
            <!--<input nz-input placeholder="最大值出现时间" formControlName="maxTime">-->
            <!--</nz-form-control>-->
            <!--</nz-form-item>-->
            <!--</div>-->
            <!--<div nz-col [nzSpan]="12">-->
            <!--<nz-form-item nzFlex>-->
            <!--<nz-form-label>最小值出现时间</nz-form-label>-->
            <!--<nz-form-control>-->
            <!--<input nz-input placeholder="最小值出现时间" formControlName="minTime">-->
            <!--</nz-form-control>-->
            <!--</nz-form-item>-->
            <!--</div>-->

            <!--<div nz-col [nzSpan]="12">-->
            <!--<nz-form-item nzFlex>-->
            <!--<nz-form-label>平均值</nz-form-label>-->
            <!--<nz-form-control>-->
            <!--<input nz-input placeholder="平均值" formControlName="avg">-->
            <!--</nz-form-control>-->
            <!--</nz-form-item>-->
            <!--</div>-->
            <!--<div nz-col [nzSpan]="12">-->
            <!--<nz-form-item nzFlex>-->
            <!--<nz-form-label>中位值</nz-form-label>-->
            <!--<nz-form-control>-->
            <!--<input nz-input placeholder="中位值" formControlName="mid">-->
            <!--</nz-form-control>-->
            <!--</nz-form-item>-->
            <!--</div>-->
            <!--<div nz-col [nzSpan]="12">-->
            <!--<nz-form-item nzFlex>-->
            <!--<nz-form-label>前3年平均值</nz-form-label>-->
            <!--<nz-form-control>-->
            <!--<input nz-input placeholder="前3年平均值" formControlName="lastAvg">-->
            <!--</nz-form-control>-->
            <!--</nz-form-item>-->
            <!--</div>-->
            <!--<div nz-col [nzSpan]="12">-->
            <!--<nz-form-item nzFlex>-->
            <!--<nz-form-label>前3年中位值</nz-form-label>-->
            <!--<nz-form-control>-->
            <!--<input nz-input placeholder="前3年中位值" formControlName="lastMid">-->
            <!--</nz-form-control>-->
            <!--</nz-form-item>-->
            <!--</div>-->
            <!--<div nz-col [nzSpan]="12">-->
            <!--<nz-form-item nzFlex>-->
            <!--<nz-form-label>与前三年对比</nz-form-label>-->
            <!--<nz-form-control>-->
            <!--<input nz-input placeholder="与前三年对比" formControlName="compareWarning">-->
            <!--</nz-form-control>-->
            <!--</nz-form-item>-->
            <!--</div>-->
            <!--<div nz-col [nzSpan]="12">-->
            <!--<nz-form-item nzFlex>-->
            <!--<nz-form-label>与前三年对比</nz-form-label>-->
            <!--<nz-form-control>-->
            <!--<input nz-input placeholder="与前三年对比" formControlName="compareSecure">-->
            <!--</nz-form-control>-->
            <!--</nz-form-item>-->
            <!--</div>-->
            <!--</div>-->
            <!--</form>-->
            <!--</nz-card>-->
            <ng-template #xytzzCardTemplate>
              <div class="card-search-wrap">
                <div class="title">
                  <div style="display: inline-block;margin-right: 5px">
                    <!--<span>特征值：</span>-->
                    <nz-select
                      [(ngModel)]="monthSelectedIdx"
                      (ngModelChange)="changeMonthChart()">
                      <nz-option
                        *ngFor="let item of eigenValues; let idx = index"
                        [nzValue]="idx"
                        [nzLabel]="item"
                      ></nz-option>
                    </nz-select>
                  </div>
                  <div style="display: inline-block;margin-right: 5px">
                    <!--<span>时间类型：</span>-->
                    <nz-select [(ngModel)]="monthType">
                      <nz-option
                        *ngFor="let item of timeTypes"
                        [nzValue]="item.value"
                        [nzLabel]="item.label"></nz-option>
                    </nz-select>
                  </div>

                  <div style="display: inline-block;margin-right: 5px">
                    <!--<span>历史年段：-->
                    <nz-year-picker
                      [(ngModel)]="year1"
                      nzPlaceHolder=""
                      style="width: 75px"></nz-year-picker>
                    -
                    <nz-year-picker
                      [(ngModel)]="year2"
                      nzPlaceHolder="" style="width: 75px"></nz-year-picker>
                    <!--</span>-->

                  </div>
                  <div style="display: inline-block">
                    <!--<span style="margin-right: 10px">当前年：{{ curYear }}</span>-->
                    <!--<button nz-button nzType="primary" (click)="onQueryMonthList()">-->
                    <!--<i nz-icon nzType="search" class="search-icon" nzTheme="outline"></i>-->
                    <!--</button>-->
                    <div>
                      <i nz-icon nzType="search" class="search-icon" nzTheme="outline" (click)="onQueryMonthList()"></i>
                    </div>
                  </div>
                </div>

              </div>
            </ng-template>

            <ng-template #jcsjCardTemplate>
              <div class="card-search-wrap">
                <div class="title">
                  <div style="display: inline-block;margin-right: 5px">
                    <nz-select
                      [(ngModel)]="hType"
                      (ngModelChange)="changeHistoryChart()">
                      <nz-option
                        *ngFor="let item of historyTypes; let idx = index"
                        [nzValue]="idx"
                        [nzLabel]="item"
                      ></nz-option>
                    </nz-select>
                  </div>
                  <div style="display: inline-block;margin-right: 5px">
                    <nz-year-picker
                      [(ngModel)]="historyYear1"
                      nzPlaceHolder=""
                      style="width: 75px"
                    ></nz-year-picker>
                    -
                    <nz-year-picker
                      [(ngModel)]="historyYear2"
                      nzPlaceHolder=""
                      style="width: 75px"
                    ></nz-year-picker>
                  </div>


                  <div style="display: inline-block;">
                    <nz-range-picker
                      nzFormat="MM-dd"
                      [nzPlaceHolder]="['开始时间', '结束时间']"
                      ngModel
                      (ngModelChange)="onChangeHistory($event)"
                      style=" width: 200px">
                    </nz-range-picker>
                  </div>
                  <div style="display: inline-block;">
                    <i nz-icon nzType="search" class="search-icon" nzTheme="outline" (click)="onQueryHistory()"></i>
                  </div>
                </div>
              </div>
            </ng-template>
            <!--<nz-card [nzTitle]="stationName + '水位流量关系曲线'"-->
            <!--class="card">-->
            <!--<div class="diagram-box">-->
            <!--<img src="./assets/images/map/monitor/diagram-aa.png" alt=""/>-->
            <!--</div>-->
            <!--</nz-card>-->
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

